<template>
  <div id="header">
    <ul>
      <template v-for="item in 9">
        <li
          v-on="{ mouseleave: myLeave }"
          @mouseenter="myEnter(item)"
          :key="item"
        >
          <img :src="require('../assets/images/dongman'+item+'.jpg')" alt="" />
          <div class="mask" v-show="isShow == item">
            <div class="mask-button">立即下载</div>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>


<script>
export default {
  name: "dongman",
  data() {
    return {
      isShow: -1,
    };
  },
  methods: {
    myEnter(i) {
      this.isShow = i;
      console.log(4);
    },
    myLeave() {
      this.isShow = false;
    },
  },
};
</script>


<style lang="scss" scoped>
#header {
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;

    li {
      margin: 10px 10px;
      position: relative;
      img {
        width: 350px;
        height: 200px;
        border-radius: 5px;
      }
    }
    .mask {
      position: absolute;
      left: 1px;
      top: 2px;
      width: 350px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.5);
      padding-top: 75px;
      box-sizing: border-box;
      border-radius: 5px;
      .mask-button {
        width: 100px;
        height: 50px;
        background-color: #f4bb0b;
        margin: 0 auto;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
      }
    }
  }
}
</style>